import React from 'react'
import { connect } from 'react-redux'
import { Result, List, WhiteSpace, Button, WingBlank, Modal } from 'antd-mobile'
import browserCookies from 'browser-cookies'
import { logoutSubmit } from '../../redux/user.redux'
import { Redirect } from 'react-router-dom'

@connect(
  state => state.user,
  { logoutSubmit }
)
class User extends React.Component {
  logout () {
    Modal.alert('注销', '确认退出登录吗？', [
      {text: '取消', onPress: () => console.log('cancel')},
      {text: '确定', onPress: () => {
        browserCookies.erase('userid')
        this.props.logoutSubmit()
        // console.log(this.props.redirectTo)
        this.props.history.push('/login')
      }}
    ])
  }
  render () {
    let props = this.props
    const Item = List.Item
    const Brief = Item.Brief
    return props.user ? (
      <div>
        <Result
          img={<img src={require(`../../assets/image/${props.avatar}.png`)} alt='avatar' style={{width: 50}}/>}
          title={props.user}
          message={props.type === 'boss' ? props.company : null} />
        <List renderHeader={() => '简介'}>
          <Item multipleLine>
            {props.title}
            {props.desc.split('\n').map((v, i) => <Brief key={i}>{v}</Brief>)}
            {props.type === 'boss' ? <Brief>薪资：{props.money}</Brief> : null }
          </Item>
        </List>
        <WhiteSpace />
        <WingBlank>
          <Button type="warning" onClick={this.logout.bind(this)}>退出登录</Button>
        </WingBlank>
      </div>
    ) : <Redirect to={props.redirectTo || '/login'} />
  }
}

export default User